﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选练习</title>
</head>

<body>

    <form>
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

        <br/>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

    <script src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        /*
                   功能说明:
                   1. 点击'全选': 选中所有爱好
                   2. 点击'全不选': 所有爱好都不勾选
                   3. 点击'反选': 改变所有爱好的勾选状态
                   4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
                   5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
                   6. 点击'提交': 提示所有勾选的爱好
                   */
        $(function() {
            var $Items = $(':checkbox[name=items]')
            var $checkedAllBox = $('#checkedAllBox')

            // 1. 点击'全选': 选中所有爱好
            $('#checkedAllBtn').click(function() {
                $Items.prop('checked', true)
                $checkedAllBox.prop('checked', true)
            })

            // 2. 点击'全不选': 所有爱好都不勾选
            $('#checkedNoBtn').click(function() {
                $Items.prop('checked', false)
                $checkedAllBox.prop('checked', false)
            })

            // 3. 点击'反选': 改变所有爱好的勾选状态
            $('#checkedRevBtn').click(function() {
                $Items.each(function() {
                    this.checked = !this.checked
                })
                $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size() === 0)
            })

            // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
            $checkedAllBox.click(function() {
                $Items.prop('checked', this.checked)
            })

            // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
            $Items.click(function() {
                $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size() === 0)
            })

            // 6. 点击'提交': 提示所有勾选的爱好
            $('#sendBtn').click(function() {
                $Items.filter(':checked').each(function() {
                    alert(this.value)
                })
            })
        })
    </script>
</body>

</html>